<template>
  <van-popup
    v-model="companySelectionShow"
    @click-overlay="overlay"
    :close-on-click-overlay="false"
    class="popupcontent"
    position="bottom"
  >
    <div class="testh">
      <div class="pophead">
        <p class="w100 t-a-l fs14">
          <span @click="overlay">取消</span>
        </p>
        <p class="flex1 t-a-c">机构选择</p>
        <p class="w100 t-a-r fs14">
          <span @click="oversure">确定</span>
        </p>
      </div>
      <div id="colorbox" class="content-box">
        <div class="p-l-6">
          <div class="steps">
            <div @click="reset" class="circle-list">
              <div v-if="active === 0" class="circle">
                <span class="icon icon-xuanzhong iconsz"></span>
              </div>
              <div v-else class="circle changecirclecolor">
                <div :class="{ bewhite: [1, 2].includes(active) }" class="graycircle"></div>
              </div>
              <div class="circle-text ellipsis">{{ level1 }}</div>
            </div>
          </div>
          <div class="steps">
            <div @click="reset2(level2)" class="circle-list">
              <div v-if="active === 1" class="circle">
                <div :class="{ bewhite: [1, 2].includes(active) }" class="posline"></div>
                <span class="icon icon-xuanzhong iconsz"></span>
              </div>
              <div v-else class="circle changecirclecolor">
                <div :class="{ changecolor: [0].includes(active) }" class="posline"></div>
                <div :class="{ changecolor: [0].includes(active) }" class="graycircle"></div>
              </div>
              <div :class="{ changecolor: [0].includes(active) }" class="circle-text ellipsis">{{ level2 }}</div>
            </div>
          </div>
          <div class="steps">
            <div @click="reset3(level3)" class="circle-list">
              <div v-if="active === 2" class="circle">
                <div :class="{ changecolor: [0, 1].includes(active) }" class="posline"></div>
                <span class="icon icon-xuanzhong iconsz"></span>
              </div>
              <div v-else class="circle changecirclecolor">
                <div :class="{ changecolor: [0, 1].includes(active) }" class="posline"></div>
                <div :class="{ changecolor: [0, 1].includes(active) }" class="graycircle"></div>
              </div>
              <div :class="{ changecolor: [0, 1].includes(active) }" class="circle-text ellipsis">{{ level3 }}</div>
            </div>
          </div>
        </div>
        <div class="listbox">
          <div
            @click="changeChecked(item)"
            v-for="item in filtdata"
            :key="item.orgBranchCode"
            :class="{
              'bhover-bg': checkedLevelName === item.orgBranchName
            }"
            class="bhover listopacity"
          >
            <p class="flex1 ellipsis">{{ item.orgBranchName }}</p>
            <p class="w30 t-a-r">
              <van-icon :name="checkedLevelName === item.orgBranchName ? 'success' : ''" />
            </p>
          </div>
        </div>
      </div>
    </div>
  </van-popup>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
      level1: '全司',
      level2: '请选择中支公司',
      level3: '请选择支公司',
      level1Index: NaN,
      level2Index: NaN,
      level3Index: NaN,
      checkedLevelName: '全司',
      checkedLevelNum: 1,
      checkedListArr: [
        {
          orgBranchCode: '全司1',
          orgBranchName: '全司'
        }
      ],
      filtdata: []
    }
  },
  props: ['companySelectionShow', 'orgBranchAllList', 'saveCheckedlist'],
  created() {
    this.filtdatas()
  },
  watch: {
    companySelectionShow(a) {
      if (a) {
        this.reset()
        if (this.saveCheckedlist.length) {
          this.checkedLevelNum = 1
          this.saveCheckedlist.forEach((e, i) => {
            this.changeChecked(e)
          })
        }
      }
    },
    orgBranchAllList() {
      this.filtdatas()
    }
  },
  methods: {
    reset(e) {
      if (e === '全司') return
      this.level1 = '全司'
      this.checkedLevelName = '全司'
      this.checkedLevelNum = 1
      this.level3 = '请选择支公司'
      this.level2 = '请选择中支公司'
      this.checkedLevelNum = 1
      this.active = 0
      this.checkedListArr = [
        {
          orgBranchCode: '全司1',
          orgBranchName: '全司'
        }
      ]
      this.filtdatas()
    },
    reset2(e) {
      if (e === '请选择中支公司') return
      this.checkedLevelName = ''
      this.level3 = '请选择支公司'
      this.level2 = '请选择中支公司'
      this.active = 0
      this.checkedLevelNum = 2
      this.filtdatas(this.level1Index)
      this.checkedListArr = this.checkedListArr.slice(0, 1)
    },
    reset3(e) {
      if (e === '请选择支公司') return
      this.checkedLevelName = ''
      this.level3 = '请选择支公司'
      this.checkedListArr.pop()
      this.active = 1
    },
    changeChecked(e) {
      if (e.orgBranchName === '全司') {
        this.checkedLevelName = e.orgBranchName
        this.level1 = e.orgBranchName
        this.checkedLevelNum = 1
        this.checkedListArr = [
          {
            orgBranchCode: '全司1',
            orgBranchName: '全司'
          }
        ]
        return
      }
      this.checkedLevelName = e.orgBranchName
      if (this.checkedLevelNum === 1) {
        this.level1 = e.orgBranchName
        this.orgBranchAllList.find((v, n) => {
          if (e.orgBranchCode === v.orgBranchCode) {
            this.level1Index = n
            this.checkedLevelNum = 2
          }
        })
        this.checkedListArr = []
        this.checkedListArr.push(e)
        this.filtdatas(this.level1Index)
        return
      }
      if (this.checkedLevelNum === 2) {
        this.level2 = e.orgBranchName
        this.active = 1
        this.filtdata.find((v, n) => {
          if (e.orgBranchCode === v.orgBranchCode) {
            this.level2Index = n
            this.checkedLevelNum = 3
          }
        })
        this.checkedListArr.push(e)
        this.filtdatas(this.level1Index, this.level2Index)
        return
      }
      if (this.checkedLevelNum === 3) {
        this.level3 = e.orgBranchName
        this.active = 2
        if (this.checkedListArr.length === 3) this.checkedListArr.pop()
        this.checkedListArr.push(e)
      }
    },
    filtdatas(...arg) {
      if (arg.length === 0) {
        this.filtdata = this.orgBranchAllList.map(e => e)
        this.filtdata.unshift({
          orgBranchCode: '全司1',
          orgBranchName: '全司'
        })
      }
      if (arg.length === 1) {
        this.filtdata = this.orgBranchAllList[arg[0]].subList?.map(e => e)
      }
      if (arg.length === 2) {
        this.filtdata = this.orgBranchAllList[arg[0]].subList[arg[1]].subList?.map(e => e)
      }
    },
    overlay() {
      this.$emit('update:companySelectionShow', false)
    },
    oversure() {
      if (this.checkedLevelNum === 1) {
        this.$emit('checkedlist', [])
        this.overlay()
        return
      }
      this.$emit('checkedlist', JSON.parse(JSON.stringify(this.checkedListArr)))
      this.overlay()
    }
  }
}
</script>

<style lang="scss" scoped>
.popupcontent {
  width: 100%;
  height: 80%;
  font-size: 18px;
  background-color: $light-bc;
  border-radius: 16px 16px 0px 0px;
  box-sizing: border-box;
  padding: 10px 0 16px;
  .w100 {
    width: 100px;
  }
  .w30 {
    width: 30px;
  }
  .ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .fs14 {
    font-size: 14px;
  }
  .t-a-l {
    text-align: left;
  }
  .t-a-r {
    text-align: right;
  }
  .t-a-c {
    text-align: center;
  }
  .flex1 {
    flex: 1;
  }
  .testh {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    .pophead {
      height: 48px;
      line-height: 48px;
      position: relative;
      display: flex;
      padding: 0 20px;
    }
    .content-box {
      height: 100%;
      padding-bottom: 10px;
      overflow: hidden;
      display: flex;
      flex-flow: column;
      .p-l-6 {
        padding-left: 16px;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        .steps {
          .circle-list {
            display: flex;
            font-size: 16px;
            align-items: center;
            .iconsz {
              font-size: 12px;
              color: $light-bc;
            }
            .circle {
              width: 14px;
              height: 14px;
              border-radius: 50%;
              background: #fff;
              text-align: center;
              display: flex;
              align-items: center;
              justify-content: center;
              position: relative;
              .posline {
                width: 1px;
                height: 26px;
                background: #fff;
                position: absolute;
                top: -23px;
                left: 50%;
                margin-left: -0.5px;
                z-index: -1;
              }
            }
            .changecirclecolor {
              background-color: transparent; //$light-bc;
            }
            .graycircle {
              width: 8px;
              height: 8px;
              border-radius: 50%;
              background: #fff;
            }
            .circle-text {
              flex: 1;
              padding-left: 16px;
              height: 34px;
              line-height: 34px;
            }
            .changecolor {
              opacity: 0.32;
            }
          }
        }
      }
      .listbox {
        flex: 1;
        overflow-y: auto;
        .listopacity {
          opacity: 0.72;
        }
        .bhover {
          display: flex;
          height: 36px;
          line-height: 36px;
          font-size: 14px;
          padding: 0 16px;
        }
        .bhover-bg {
          background: rgba(233, 233, 237, 0.16);
          font-size: 16px;
          opacity: 1;
        }
      }
      .text {
        line-height: 20px;
        padding-top: 10px;
        color: #d3d4da;
      }
      .listbtn {
        display: inline-block;
        padding: 4px;
        margin-right: 6px;
        background: rgba(233, 233, 237, 0.16);
      }
    }
  }
}
</style>
